<template>
  <div class="snack-list">
    <el-row :gutter="20">
      <el-col :span="6" v-for="snack in snacks" :key="snack.id">
        <el-card class="snack-card">
          <img :src="snack.cover" class="snack-cover">
          <div class="snack-info">
            <h3>{{ snack.name }}</h3>
            <p>Brand: {{ snack.brand }}</p>
            <p>Weight: {{ snack.weight }}g</p>
            <p class="price">${{ snack.price }}</p>
            <el-button type="primary" @click="addToCart(snack)">Add to Cart</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'SnackList',
  data() {
    return {
      snacks: [
        {
          id: 1,
          name: 'Potato Chips',
          brand: 'Lays',
          price: 3.99,
          weight: 150,
          cover: '/images/chips.jpg',
          description: 'Classic salted potato chips...'
        },
        {
          id: 2,
          name: 'Chocolate Bar',
          brand: 'Hershey\'s',
          price: 2.49,
          weight: 100,
          cover: '/images/chocolate.jpg',
          description: 'Milk chocolate bar...'
        },
        {
          id: 3,
          name: 'Mixed Nuts',
          brand: 'Planters',
          price: 6.99,
          weight: 200,
          cover: '/images/nuts.jpg',
          description: 'Premium mixed nuts selection...'
        },
        {
          id: 4,
          name: 'Gummy Bears',
          brand: 'Haribo',
          price: 2.99,
          weight: 160,
          cover: '/images/gummy.jpg',
          description: 'Fruit-flavored gummy bears...'
        }
      ]
    }
  },
  methods: {
    addToCart(snack) {
      this.$store.commit('addToCart', snack);
      this.$message.success('Added to cart successfully');
    }
  }
}
</script>

<style scoped>
.snack-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.snack-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.snack-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.snack-info {
  padding: 10px;
}

.price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}

h3 {
  margin: 10px 0;
  font-size: 18px;
  height: 40px;
  overflow: hidden;
}
</style>